<template>
    <div class="personal-container">
        <headerBar :title="title"></headerBar>
        <van-notice-bar @click="copyQQ" class="scroll_bar">
            <div>关注公众号<span class="word gongzhonghao">蒸汽小兔</span>或者加QQ群<span class="word qqqun">967700061</span>,都可以有机会获得更多大作，可爱女装群主不定时QQ群和微信发免费key!（点击复制QQ群号）
            </div>
        </van-notice-bar>
        <div class="personal-header">
            <div class="balance">
                余额:{{ userInfo.money / 100}}宝石
            </div>
            <div class="top-up" @click="topUp">
                <div class="top-up-button">
                    充值
                </div>
            </div>
        </div>
        <van-dialog
                v-model="showTopUp"
                :close-on-click-overlay="true"
                :before-close="beforeClose"
                class="top-up-dialog"
        >
            <div class="top-up-dialog-header">充值</div>
            <div class="flex-table" v-if="!qrcode">
                <div @click="setPrize(6)" :class="['ta', {'ta-active': amount == 6}]">6宝石</div>
                <div @click="setPrize(30)" :class="['ta', {'ta-active': amount == 30}]">30宝石</div>
                <div @click="setPrize(68)" :class="['ta', {'ta-active': amount == 68}]">68宝石</div>
            </div>
            <div class="flex-table" v-if="!qrcode">
                <div @click="setPrize(128)" :class="['ta', {'ta-active': amount == 128}]">128宝石</div>
                <div @click="setPrize(328)" :class="['ta', {'ta-active': amount == 328}]">328宝石</div>
            </div>
            <van-radio-group
                    v-model="radio"
                    class="pay-methods"
                    v-if="!qrcode"
            >
                <van-radio
                        class="method"
                        name="1"
                        @click="radio = '1'"
                >支付宝
                </van-radio>
                <van-radio
                        class="methos"
                        name="2"
                        @click="radio = '2'"
                >微信
                </van-radio>
            </van-radio-group>
            <div class="qrcode-div" v-if="qrcode">
                <img class="qrcode-img" :src="qrcode">
            </div>
            <div class="realPrice" v-if="qrcode">{{realPrice}}元</div>
            <div class="tip" v-if="qrcode">由于QQ,微信内部浏览器限制，请保存支付二维码后使用支付宝或微信扫描支付</div>
            <div class="tip" v-if="qrcode">支付二维码不可以重复使用噢</div>
            <div class="tip" v-if="qrcode">使用浏览器可以自动打开支付宝支付，支付更安全快捷</div>
            <!--<div class="tip" v-if="qrcode">支付成功后请刷新页面或进入其他页面刷新余额</div>-->
        </van-dialog>
        <div class="storage">
            <div
                    class="list-item"
                    v-for="(item, index) in mykey"
                    v-if="mykey.length > 0">
                <div class="left">
                    <div class="left-div">
                        <img class="left-img" :src="item.icon"/>
                    </div>
                    <div class="left-title">{{item.title}}</div>
                    <div class="left-title-price">价值: {{item.price/100}}宝石</div>
                </div>
                <div class="right">
                    <div
                            class="button"
                            @click="goDetail(item)"
                            v-if="item.status === 1"
                    >管理</div>
                    <div
                            class="right-text"
                            v-if="item.status === 2"
                            @click="copy(item.key)"
                    >{{item.key}}
                    </div>
                    <div class="right-time">
                        <div>
                            <div><span>获取时间:</span></div>
                            <span class="time">{{item.get_time * 1000 | dateFormatFilter('yyyy/MM/dd hh:mm')}}</span>
                        </div>
                        <div>
                            <div><span>打开时间:</span></div>
                            <span class="time">{{item.get_time * 1000 | dateFormatFilter('yyyy/MM/dd hh/mm')}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="none-list" v-if="mykey.length === 0">
                <div class="none-div">
                    <img class="none-img" src="../assets/images/nokey.png"/>
                </div>
                <div class="none-text">暂无数据
                </div>
            </div>
        </div>

        <div class="pag">
            <div class="bef" @click="bef">上一页</div>
            <div class="next" @click="next">下一页</div>
        </div>
        <van-dialog
                v-model="showDetail"
                align="center"
                title="恭喜您获得了"
                show-cancel-button
                cancel-button-text="卖出游戏"
                confirm-button-text="显示key"
                :close-on-click-overlay="true"
                :before-close="beforeCloseDetail"
        >
            <img
                    :src="detail.icon"
                    v-if="detail.icon"
                    class="chosen_icon"
                    alt=""
            >
            <img
                    src="../assets/images/default.png"
                    class="chosen_icon"
                    v-else
                    alt=""
            >
            <div class="detail">
                <div class="chosen_name">游戏名: {{detail.title}}</div>
                <div class="chosen_price">回收价格: {{detail.price / 100}}</div>
            </div>
        </van-dialog>
        <Bottom></Bottom>
    </div>
</template>

<script>
/* eslint-disable */
import axios from "axios";
import Qs from "qs";
import Bottom from "@/components/bottom";
import headerBar from "@/components/headerBar";
import {browser} from "@/utils"
import {
  getMemberDetail,
  recharge,
  rechargde,
  getMyKey,
  recycle,
  resourceDetail,
  openKey,
  getRechargeStatus,
  apipay,
  getAlipayStatus
} from "@/apis/apis";
import { stringify, dateFormat } from "@/utils";
import { mapState } from "vuex";
// 现在的充值部分逻辑为不定额充值,也就是说现在我们的充值方式为类似FARMSKINS的方式
export default {
  filters: {
    dateFormatFilter(value, Format) {
      if (typeof value == "undefined") return "";
      if (typeof value == "number") value = new Date(value);
      if (typeof value == "string") value = new Date(value);
      return dateFormat(value, Format);
    }
  },
  data() {
    return {
      showDetail: false,
      money: 0,
      showTopUp: false,
      mykey: [],
      amount: 0,
      pageSize: 10,
      radio: "1",
      title: "个人中心",
      localImg:
        "https://steamkeymarket.oss-cn-hangzhou.aliyuncs.com/steamkey.png",
      detail: {
        name: "",
        icon: "",
        price: "",
        resource_uri: ""
      },
      page: 1,
      lock: false,
      qrcode: null,
      realPrice: null,
      timer: null,
      browser: 'wap'
    };
  },
  components: {
    Bottom,
    headerBar
  },
  computed: {
    ...mapState({
      isLogined: "isLogined",
      userInfo: "detail"
    })
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 判断现在浏览器哪种环境
      console.log(browser)
      if(browser.isPC) {
        this.browser = 'PC'
      }
      if(browser.isQQ) {
        this.browser = 'qq'
      }
      if(browser.isWeixin) {
        this.browser = 'weixin'
      }
      this.$store.dispatch("fetchUserLoginStatus");
      getMyKey(this.page).then(res => {
        if (res._status == 0) {
          this.mykey = res.objects;
          this.mykey.map(item => {
            if (item.icon == "") {
              item.icon = this.localImg;
            }
          });
        }
      });
    },
    copyQQ() {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", "967700061");
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$toast({
          message: "复制成功",
          position: "bottom"
        });
      }
      document.body.removeChild(input);
    },
    copy(code) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", code);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$toast({
          message: "复制成功",
          position: "bottom"
        });
      }
      document.body.removeChild(input);
    },
    bef() {
      if (this.page === 1) {
        return;
      }
      getMyKey(this.page - 1).then(res => {
        if (res._status === 0) {
          this.mykey = res.objects;
          this.mykey.map(item => {
            if (item.icon === "") {
              item.icon = this.localImg;
            }
          });
          this.page--;
          this.lock = false;
        }
      });
    },
    next() {
      if (this.lock) {
        return;
      }
      getMyKey(this.page + 1).then(res => {
        if (res._status === 0) {
          this.mykey = res.objects;
          this.mykey.map(item => {
            if (item.icon === "") {
              item.icon = this.localImg;
            }
          });
          this.page++;
          if (res.objects.length < 20) {
            this.lock = true;
          } else {
            this.lock = false;
          }
        }
      });
    },
    goDetail(item) {
      this.showDetail = true;
      this.detail = item;
    },
    setPrize(am) {
      this.amount = am;
      console.log(this.amount);
    },

    // 支付宝
    payAlipay(type){
      apipay({
        type: type,
        amount: this.amount * 100,
        return_url: "https://rabbitsteam.com/wait" +"?ali_order="
      }).then(res=>{
        if (res._status === 0) {
          window.location.href = res.url
        }
      })
      // pay({
      //   payType: this.props.method,
      //   orderSource: 1,
      //   orderId: order.id,
      //   successUrl: '',
      // }).then(res=>{
      //   if(res.code == 0){
      //     this.setState({qrcodeUrl:res.data && res.data.url});
      //     this.startRollOrder();
      //   }else if(res.code == 60){
      //     this.setState({productSoldOut:true});
      //   }
      // });
    },
    pageChange() {},
    beforeCloseDetail(action, done) {
      if (action === "confirm") {
        if (this.userInfo.pull_new_lock) {
          this.$toast({
            position: "bottom",
            message: "您邀请的好友实在太多啦,联系群主加入蒸汽小兔内部群吧~"
          });
          done();
          return;
        }
        openKey(this.detail.resource_uri).then(res => {
          if (res._status === 0) {
            this.$toast({
              position: "bottom",
              message: "打开成功:" + res.key
            });
            this.init();
            done();
          }
        });
        done();
      } else {
        recycle(this.detail.resource_uri).then(res => {
          if (res._status === 0) {
            this.$toast({
              position: "bottom",
              message: "卖出成功"
            });
            this.init();
            done();
          }
        });
      }
    },
    beforeClose(action, done) {
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
      if (action === "confirm") {
        if (this.qrcode) {
          done();
          return;
        }
        if (!this.amount) {
          done();
          return this.$toast({
            message: "充值金额不能为空",
            position: "bottom"
          });
        }
        if (this.amount < 5) {
          done();
          return this.$toast({
            message: "最低充值5元",
            position: "bottom"
          });
        }
        if (this.amount > 1000) {
          done();
          return this.$toast({
            message: "最高充值1000元",
            position: "bottom"
          });
        }
        if (!reg.test(this.amount)) {
          done();
          return this.$toast({
            message: "请输入正确的充值金额",
            position: "bottom"
          });
        }
        if (this.browser == 'wap' && this.radio == 1){
          this.payAlipay('1')
          done()
        } else if (this.browser == 'PC' && this.radio == 1) {
          this.payAlipay('2')
          done()
        } else {
          recharge({
            price: this.amount * 100,
            type: this.radio,
            return_url: window.location.href + "?orderId="
          }).then(res => {
            axios({
              url: "https://pay.bbbapi.com/?format=json",
              method: "post",
              data: res.data,
              transformRequest: [
                function(data) {
                  data = Qs.stringify(data);
                  return data;
                }
              ],
              headers: { "Content-Type": "application/x-www-form-urlencoded" }
            }).then(res => {
              this.qrcode =
                "http://mobile.qq.com/qrcode?url=" + res.data.data.qrcode;
              this.realPrice = res.data.data.realprice;
              this.timer = setInterval(() => {
                getRechargeStatus(res.data.data.orderid).then(() => {
                  if (res.status === 1) {
                    this.$toast({
                      message: "充值成功,1s后自动刷新页面",
                      position: "bottom"
                    });
                    this.timer = null;
                    setTimeout(() => {
                      window.location.reload();
                    }, 1000);
                  }
                });
              }, 1250);
              done(false);
            });
          });
          this.$toast({
            message: "正在获取支付二维码,请勿关闭当前页",
            position: "bottom"
          });
        }
      } else {
        done();
      }
    },
    topUp() {
      this.qrcode = null;
      this.realPrice = null;
      this.showTopUp = true;
    }
  },
  beforeDestroy() {
    this.timer = null;
  }
};
</script>

<style lang="scss" scoped>
.qq {
  text-align: left;

  .word {
    color: #ef6a6e;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 18px;
  }

  .van-dialog__header {
    font-size: 20px;
    font-weight: 500;
  }

  .van-dialog__content {
    padding: 15px;
  }
}

.personal-container {
  min-height: 100vh;
  height: 100%;
  padding-bottom: 150px;

  .scroll_bar {
    margin-top: 60px;
  }

  .chosen_name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .chosen_icon {
    width: 100%;
    padding: 15px;
  }

  .chosen_price {
    font-size: 14px;
    color: yellow;
  }

  .detail {
    padding: 0 15px;
    margin-bottom: 20px;
    text-align: left;
  }

  .flex-table {
    display: flex;

    .ta {
      width: 210px;
      background-color: #7d7e80;
      margin: 10px;
      height: 50px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
    }

    .ta-active {
      background-color: #ff976a;
    }
  }

  .realPrice {
    text-align: center;
    margin: 20px;
    font-size: 20px;
  }

  .qrcode-div {
    margin: auto;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;

    .qrcode-img {
      width: 100%;
      height: 100%;
    }
  }

  .pay-methods {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 60px;
  }

  .tip {
    color: #ffc220;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .storage {
    padding: 0 20px;

    .none-list {
      color: #e8e8e8;
      margin: auto;
      text-align: center;
      padding-top: 70px;
      padding-bottom: 20px;
      font-size: 30px;

      .none-div {
        width: 100px;
        height: 100px;
        margin: auto;

        .none-img {
          width: 100%;
          height: 100%;
        }
      }

      .none-text {
        margin-top: 20px;
        font-size: 28px;
      }
    }

    .list-item {
      background-image: url('../assets/images/bg-text-pattern-winter.png');
      background-repeat: repeat;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: #7d7e807d 1px solid;
      border-radius: 10px;
      padding: 0 10px;
      margin-top: 25px;

      .left {
        margin: 20px 0 20px 5px;
        flex: 6;

        .left-div {
          width: 138px;
          height: 63px;

          .left-img {
            border: 1px #999 solid;
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }

        .left-title {
          margin-top: 10px;
          color: #ff4444d9;
        }

        .left-title-price {
          margin-top: 5px;
          color: #ffc220;
          font-size: 11px;
        }
      }

      .right {
        margin: 20px 5px 20px 0;
        flex: 4;

        .button {
          background-color: #ffffffc9;
          border-radius: 10px;
          color: #ef6a6ead;
          font-weight: 666;
          font-size: 14px;
          height: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
        }

        .right-text {
          margin-top: 10px;
          font-size: 14px;
          text-align: center;
          color: #ff976a;
          padding: 3px;
          border: 1px #ff976a solid;
        }

        .right-time {
          font-size: 14px;
          padding-top: 30px;
          color: #f6f6f6;

          .time {
            font-size: 12px;
            padding-left: 1em;
          }
        }
      }
    }
  }

  .pag {
    display: flex;
    padding: 65px 20px 50px 20px;
    justify-content: space-between;

    .bef {
      width: 120px;
      height: 40px;
      background-color: #ef6a6e;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
    }

    .next {
      width: 120px;
      height: 40px;
      border-radius: 10px;
      background-color: #ef6a6e;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .personal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px #ffc220 solid;

    .balance {
      color: #f7f7f7;
      font-size: 25px;
    }

    .top-up {
      height: 30px;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffc200;
      border-radius: 10px;

      .top-up-button {
        width: 50px;
        text-align: center;
        font-weight: 666;
      }
    }
  }

  .storage {
    .storage-pagination {
      padding-top: 20px;
    }
  }

  .top-up-dialog {
    .top-up-dialog-header {
      margin-top: 20px;
      width: 100%;
      text-align: center;
      color: #ef6a6e;
      font-size: 29px;
      margin-bottom: 20px;
    }

    .top-up-dialog-amount {
      width: 60%;
      margin: auto;
      margin-bottom: 40px;
    }
  }
}
</style>
